<template>
  <div class="account-container">
    <!-- <el-card class="box-card"> -->
    <el-tabs tab-position="left" v-model="activeName" style="height: 1000px" type="border-card">
      <el-tab-pane label="个人资料">
        <div class="grzl">
          <div class="grzl1">
            <el-row :gutter="20">
              <el-col :span="3">
                <label>
                  <el-avatar :size="90" :src="circleUrl"></el-avatar>
                  <input
                    id="file"
                    name="file"
                    type="file"
                    ref="file"
                    hidden
                    @change="onFileChange"
                  />
                </label>
              </el-col>
              <el-col :span="5">
                <h3>China-Quanda</h3>
              </el-col>
              <el-col :span="6">
                <p>角色：<span>管理员</span></p>
                <p>
                  浏览器：<span>{{ llq }}</span>
                </p>
              </el-col>
              <el-col :span="10">
                <p>登录时间：2015-11-29 20:37:00</p>
                <p>注册时间：2015-11-29 20:37:00</p>
              </el-col>
            </el-row>
          </div>
          <el-card class="box-card grzl2">
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              style="width: 60%"
            >
              <el-form-item label="用户昵称">
                <el-input
                  v-model="form.name"
                  placeholder="请输入用户昵称"
                ></el-input>
              </el-form-item>
              <el-form-item label="所在地区">
                <el-cascader
                  v-model="value"
                  :options="options"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="用户生日">
                <el-date-picker
                  type="date"
                  placeholder="请选择您的生日"
                  v-model="form.date1"
                  style="width: 50%"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="用户性别">
                <el-radio-group v-model="form.resource">
                  <el-radio label="女"></el-radio>
                  <el-radio label="男"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="个人描述">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">保存修改</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全设置">
        <div class="aqsz">
          <div class="aqsz1">
            <el-row :gutter="20">
              <el-col :span="3">
                <el-avatar :size="90" :src="circleUrl"></el-avatar>
              </el-col>
              <el-col :span="5">
                <h3>China-Quanda</h3>
              </el-col>
              <el-col :span="6">
                <p>角色：<span>管理员</span></p>
                <p>
                  浏览器：<span>{{ llq }}</span>
                </p>
              </el-col>
              <el-col :span="10">
                <p>登录时间：2015-11-29 20:37:00</p>
                <p>注册时间：2015-11-29 20:37:00</p>
              </el-col>
            </el-row>
          </div>
          <el-alert title="锁屏密码为您的登录密码" type="info" center show-icon>
          </el-alert>
          <el-card class="box-card aqsz2">
            <div slot="header" class="clearfix">
              <span>修改密码</span>
            </div>
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              style="width: 60%"
            >
              <el-form-item label="旧密码">
                <el-input
                  v-model="form.name"
                  placeholder="请输入旧密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input
                  v-model="form.name"
                  placeholder="请输入新密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input
                  v-model="form.name"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">修改密码</el-button>
              </el-form-item>
            </el-form>
          </el-card>
          <el-alert
            title="默认支付密码为 000000 为了安全起见 请更改支付密码"
            type="warning"
            center
            show-icon
          >
          </el-alert>
          <el-card class="box-card aqsz3">
            <div slot="header" class="clearfix">
              <span>修改支付密码</span>
            </div>
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              style="width: 60%"
            >
              <el-form-item label="旧支付密码">
                <el-input
                  v-model="form.name"
                  placeholder="请输入旧支付密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="新支付密码">
                <el-input
                  v-model="form.name"
                  placeholder="请输入新支付密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="确认支付密码">
                <el-input
                  v-model="form.name"
                  placeholder="请输入支付密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit"
                  >修改支付密码</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="账号绑定">
        <div class="zhbd">
          <div class="zhbd1">
            <el-row :gutter="20">
              <el-col :span="3">
                <el-avatar :size="90" :src="circleUrl"></el-avatar>
              </el-col>
              <el-col :span="5">
                <h3>China-Quanda</h3>
              </el-col>
              <el-col :span="6">
                <p>角色：<span>管理员</span></p>
                <p>
                  浏览器：<span>{{ llq }}</span>
                </p>
              </el-col>
              <el-col :span="10">
                <p>登录时间：2015-11-29 20:37:00</p>
                <p>注册时间：2015-11-29 20:37:00</p>
              </el-col>
            </el-row>
          </div>
          <el-card class="box-card zhbd2">
            <div slot="header" class="clearfix"><span>账号绑定</span></div>
            <el-row>
              <el-col :span="1">
                <div>
                  <el-avatar
                    :size="30"
                    :src="circleUrl"
                    class="tubiao"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="9">绑定手机号码</el-col>
              <el-col :span="12">当前未绑定绑定手机号码</el-col>
              <el-col :span="2"
                ><el-link type="primary">绑定/更换</el-link></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="1">
                <div>
                  <el-avatar
                    :size="30"
                    :src="circleUrl"
                    class="tubiao"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="9">绑定邮箱</el-col>
              <el-col :span="12">当前未绑定绑定邮箱账号</el-col>
              <el-col :span="2"
                ><el-link type="primary">绑定/更换</el-link></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="1">
                <div>
                  <el-avatar
                    :size="30"
                    :src="circleUrl"
                    class="tubiao"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="9">绑定QQ</el-col>
              <el-col :span="12">当前未绑定绑定QQ账号</el-col>
              <el-col :span="2"
                ><el-link type="primary">绑定/更换</el-link></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="1">
                <div>
                  <el-avatar
                    :size="30"
                    :src="circleUrl"
                    class="tubiao"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="9">绑定微信</el-col>
              <el-col :span="12">当前未绑定绑定微信账号</el-col>
              <el-col :span="2"
                ><el-link type="primary">绑定/更换</el-link></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="1">
                <div>
                  <el-avatar
                    :size="30"
                    :src="circleUrl"
                    class="tubiao"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="9">绑定支付宝</el-col>
              <el-col :span="12">当前未绑定绑定支付宝账号</el-col>
              <el-col :span="2"
                ><el-link type="primary">绑定/更换</el-link></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="1">
                <div>
                  <el-avatar
                    :size="30"
                    :src="circleUrl"
                    class="tubiao"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="9">绑定微博</el-col>
              <el-col :span="12">当前未绑定绑定微博账号</el-col>
              <el-col :span="2"
                ><el-link type="primary">绑定/更换</el-link></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="1">
                <div>
                  <el-avatar
                    :size="30"
                    :src="circleUrl"
                    class="tubiao"
                  ></el-avatar>
                </div>
              </el-col>
              <el-col :span="9">绑定Github</el-col>
              <el-col :span="12">当前未绑定绑定Github账号</el-col>
              <el-col :span="2"
                ><el-link type="primary">绑定/更换</el-link></el-col
              >
            </el-row>
            <el-divider></el-divider>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收件地址" name="ReceiveAddress">
        <ReceiveAddress />
      </el-tab-pane>
       <el-tab-pane label="操作日志">操作日志</el-tab-pane>
      <el-tab-pane label="消息提醒">消息提醒</el-tab-pane>
      <el-tab-pane label="修改密码">定时任务补偿</el-tab-pane>
    </el-tabs>
    <!-- </el-card> -->

    <!-- 修改头像的对话框 -->
    <el-dialog
      title="修改头像"
      :visible.sync="upAvatarDialogVisible"
      width="40%"
      @opened="onvDialogOpened"
      @closed="upAvatarClose"
    >
      <div class="preview-image-wrapper">
        <img :src="previewImage" class="preview-image" ref="preview-image" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="upAvatarDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="upAvatarDialogClickOk"
          >{{loading ? '更新中...' : '确 定'}}</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改头像的对话框 结束-->
  </div>
</template>

<script>
import ReceiveAddress from '@/mall/views/Account/components/ReceiveAddress'
import { getToken } from "@/utils/auth";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
import { uploadImgMax } from "@/api/upload";
import { editUser } from "@/api/user";
import { mapGetters } from "vuex";
export default {
  name: "Account",
  components:{
    ReceiveAddress
  },
  data() {
    return {
      activeName:'ReceiveAddress',
      loading:false,
      previewImage: "", //预览图片
      upAvatarDialogVisible: false,
      cropper: null, // 裁切器实例
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      llq: window.navigator.vendor,
      form: {
        name: "",
        resource: "",
        date1: "",
        desc: "",
      },
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
    };
  },
  created() {},
  computed: {
    ...mapGetters(["user_name", "userId"]),
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleChange() {
      console.log("handleChange");
    },
    // TODO: 上传到服务器报错 // 点击对话框的确定按钮后 将裁剪的图片上传到服务器
    upAvatarDialogClickOk() {
      // this.circleUrl =this.cropper.getCroppedCanvas().toDataURL('image/png')// bese64图片
      //  const blobData = window.URL.createObjectURL(this.circleUrl);
      //   console.log(blobData);
      this.loading = true;
      this.cropper.getCroppedCanvas().toBlob((file) => {
        let files = new window.File([file], "img.png", { type: "image/png" }); //blob转file，文件名那里不能少了后缀
        // const blobData = window.URL.createObjectURL(file);
        let formData = new FormData();
        formData.append("image", files);
        // 图片上传到服务器
        uploadImgMax(formData)
          .then((result) => {
            this.circleUrl = result.image;
            // 修改头像
            editUser(this.userId, { avatar: this.circleUrl })
              .then((result) => {
                this.$message.success("更新头像成功");
                this.upAvatarDialogVisible = !this.upAvatarDialogVisible;
              })
              .catch((err) => {
                this.$message.error("更新头像失败！");
              });
              this.loading = false;
          })
          .catch((err) => {
            this.$message.error("更新头像失败！，请更换图片重试");
            this.loading = false;
          })
      });
    },
    // 修改头像对话框关闭事件
    upAvatarClose() {
      // 对话框关闭，销毁裁切器
      this.cropper.destroy();
      this.upAvatarDialogVisible = false;
    },
    // Dialog打开动画结束后的回调
    onvDialogOpened() {
      // 因为在对话框中初始化裁切器，所以要等对话框完全打开的状态去初始化
      // 第一次初始化好以后，如果预览裁切器的图片发生了变化，裁切器默认不会更新
      // 如果需要预览图片发生变化更新裁切器：
      // 方式1裁切器的.replace方法
      // if(this.cropper){
      //   this.cropper.replace(this.upAvatarDialogVisibleUrl)
      //   return
      // }
      // 方式2销毁裁切器，重新初始化
      // this.cropper.destroy()
      //获取dom节点
      var image = this.$refs["preview-image"];
      // 初始化裁切器
      this.cropper = new Cropper(image, {
        aspectRatio: 1 / 1, //预览比例
        viewMode: 1, // 不能移除这个画布容器
        dragMode: "none", // 什么都不做 默认crop创建一个画布 ， move移动画布
      });
    },
    onFileChange() {
      const file = this.$refs.file;
      const blobData = window.URL.createObjectURL(file.files[0]);
      this.previewImage = blobData;
      //展示弹出层 用户预览图片
      this.upAvatarDialogVisible = !this.upAvatarDialogVisible;
      // 解决选择相同文件不触发changge事件问题
      this.$refs.file.value = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.preview-image-wrapper {
  .preview-image {
    display: block;
    max-width: 100%;
    height: 320px;
  }
}
.zhbd {
  .zhbd1 {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 30px 0 0 20px;
    height: 160px;
    margin-bottom: 18px;
  }
  .zhbd2 {
    // margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 0.5px;
    .tubiao {
      margin: -7px 0px 0px 0px;
    }
  }
}
.aqsz {
  .aqsz1 {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 30px 0 0 20px;
    height: 160px;
    margin-bottom: 18px;
  }
  .aqsz2 {
    margin-bottom: 18px;
    // height: auto;
  }
  .aqsz3 {
    // margin-top: 18px;
    // height: 960px;
    // height: auto;
  }
}
.grzl {
  .grzl1 {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 30px 0 0 20px;
    height: 160px;
  }
  .grzl2 {
    margin-top: 18px;
    height: 960px;
  }
}

::v-deep.el-tabs--border-card > .el-tabs__content {
  padding: 0 0 0 8px;
}

::v-deep.el-tabs--left.el-tabs--border-card {
  background: #f5f7fa;
  margin: 20px;
  border: 0px solid #dcdfe6;
  .el-tabs__header.is-left {
    border-right: 0px solid #dfe4ed;
    .el-tabs__item.is-active {
      border-radius: 3px;
      color: #ffffff;
      background-color: #2f4156;
    }
  }
  .is-left {
    width: 200px;
  }
  .el-tabs__item.is-left {
    margin: 0px;
    text-align: center;
  }
  .el-tabs__nav-scroll {
    background: #ffffff;
    .el-tabs__item {
      width: 100%;
      letter-spacing: 1px;
      height: 50px;
      line-height: 50px;
      font-size: 14.5px;
    }
  }
}
</style>
